html,
body,
#app {
  height: 100%;
}

// 暂时作为scss样式出现，不作为element的样式使用，文件名没有改就是了
@mixin zoomImage {
  width:100%;
  height:0;
  overflow:hidden;
  background-position: center center;
  background-repeat: no-repeat;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
}
.zoomImage{
  @include zoomImage;
  padding-bottom: 100%;
}
@each $size, $padding-bottom in (50: 50%, 66: 66%,70: 70%, 80: 80%, 100: 100%, 120: 120%, 133: 133%, 150: 150%) {
  .zoomImage-#{$size} {
    @include zoomImage;
    padding-bottom: $padding-bottom;
  }
}

@each $type, $color in (success: #67C23A, warning: #E6A23C, error: #F56C6C) {
  .icon-msg-#{$type} {
    color: $color;
    font-size: 90px;
  }
}

@each $size, $px in (12: 12px, 13: 13px, 14: 14px, 15: 15px, 18: 18px, 20: 20px) {
  .fz-#{$size} {
    font-size: $px;
  }
}

$grays: map-merge((
  "100": #f8f9fa,
  "200": #e9ecef,
  "300": #dee2e6,
  "400": #ced4da,
  "500": #adb5bd,
  "600": #6c757d,
  "700": #495057,
  "800": #343a40,
  "900": #212529
), ());

@each $num, $color in $grays {
  .text-gray-#{$num} {
    color: $color;
  }
}

@each $num, $color in $grays {
  .border-gray-#{$num} {
    border-color: $color;
  }
}

@each $rows, $num in (3:3,5:5,7:7) {
  .text-over-#{$rows} {
    display: flex;
    display:-moz-box;
    /*! autoprefixer: off */
    -moz-box-orient:vertical;
    /*! autoprefixer: on */
    display:-webkit-box;
    /*! autoprefixer: off */
    -webkit-box-orient:vertical;
    /*! autoprefixer: on */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-line-clamp: $num; /** 显示的行数 **/
  }
}

.flex-all {
  flex: 1;
}

.article-img {
  img {
    max-width: 100%;
  }
}

.bg-green {
  background-color: #94c05a;
}
.bg-gray {
  background-color: #efeff4;
}

.input-radius {
  .el-input__icon {
    height: 30px;
    line-height: 30px;
  }
  input {
    border-radius: 25px;
    height: 30px;
    line-height: 30px;
    border: none;
    &:focus {
      border-color: #94c05a;
    }
  }
}

.shadow-none {
  box-shadow: none;
}

.shadow-xs {
  box-shadow: 0 .08rem .15rem rgba(0,0,0,.05);
}
.shadow-sm {
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.shadow {
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}
.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
}

// 强制换行
.word-break {
  word-break: break-all;
}
.acticel
// 特定的绿色
.color-self-green1 {
  color: #7fa31e;
}
.span {
  flex: 1;
  overflow: auto;
  height: 500px;
}
// 为横向滚动设置的样式
.navigator-component {
  background: #fff;
  -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.12);
  box-shadow: 0 2px 3px rgba(0,0,0,0.05);
  overflow: hidden;
  .list-wrapper {
    background: none;
    text-align: center;
    height: 40px;
    .scroll-content {
      //用于横向滚动
      display: inline-block;
      .el-tabs__header {
        margin: 0;
        .el-tabs__nav-wrap {
          &::after {
            background-color: transparent;
          }
          .el-tabs__nav {
            margin: 0 20px;
            .el-tabs__active-bar {
              display: none;
            }
            .el-tabs__item {
              padding: 0 10px;
            }
            .is-active {
              font-weight: bold;
              color: #94c05a;
              border-bottom: 3px solid  #94c05a;
            }
          }
        }
      }
    }
  }
}
.nav-no-scroll {
  .el-tabs__nav {
    margin: 0 8px!important;
  }
}
.scroll-bg {
  .list-wrapper {
    background-color: #efeff4;

  }
}
.form-control:focus {
  border-color: #94c05a!important;
  box-shadow: 0 0 0 0.2rem rgba(148, 192, 90, 0.25)!important;
}


.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: flex!important;
  align-items: center;
  width: 100%;
  label {
    display: block;
    width: 100px;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: bold;
    text-align: justify;
    text-align-last:justify;
    margin-bottom: 0;
    margin-right: 18px;
  }
  input {
    width: 100%;
    border: 0;
    outline: 0;
    -webkit-appearance: none;
    background-color: transparent;
    font-size: inherit;
    color: inherit;
    height: 1.47058824em;
    line-height: 1.47058824;
  }
}
.btn-fixed-bottom {
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
  border-radius: 0;
  bottom: 0;
}

.validate-err {
  label {
    color: red;
  }
}
// 覆盖elemnt-ui样式
.el-message-box {
  width: 80%;
  vertical-align: unset;
  .el-message-box__close {
    display: none;
  }
  .el-message-box__btns {
    display: flex;
    .el-button--primary {
      flex: 1;
      color: #94c05a;
      font-size: 18px;
      border: none;
      background: transparent;
    }
    .el-button {
      font-size: 18px;
      flex: 1;
      border: none;
      background: transparent;
    }
  }
}
